<script setup>
</script>

<template>
  <div class="extremity_box">
    <div class="title wow animate__animated animate__fadeInUp">Use Cases</div>
    <div class="content">
      <div class="content_item top_item">
        <div class="sub_title wow animate__animated animate__fadeInUp">Fully On-Chain Games</div>
        <div class="sub_details wow animate__animated animate__fadeInUp">Experience the future of gaming with complete transparency and verifiability</div>
        <div class="item one wow animate__animated animate__fadeInUp">
          Strategy Games With <div>Complex State</div> Management
        </div>
        <div class="item two wow animate__animated animate__fadeInUp">  
          Multiplayer RPGs With <div>Verifiable Player</div> Interactions
        </div>
        <div class="item three wow animate__animated animate__fadeInUp">  
          Collectible Card Games <div>With Provably Fair Card</div> Draws
        </div>
        <div class="item fouth wow animate__animated animate__fadeInUp">  
          On-Chain Esports With <div>Tamper-Proof Match</div> Results
        </div>
      </div>
      <div class="content_item bottom_item">
        <div class="sub_title wow animate__animated animate__fadeInUp">Decentralized Finance</div>
        <div class="sub_details wow animate__animated animate__fadeInUp">Enhance the security and efficiency of financial applications:</div>
        <div class="item one wow animate__animated animate__fadeInUp"> 
          Decentralized Exchanges <div>With Private Order Books</div> 
        </div>
        <div class="item two wow animate__animated animate__fadeInUp"> 
          Lending Protocols With <div>Zero-Knowledge Credit</div> Scoring
        </div>
        <div class="item three wow animate__animated animate__fadeInUp">    
          Yield Farming Platforms <div>With Verifiable Reward</div> Calculations
        </div>
        <div class="item fouth wow animate__animated animate__fadeInUp">    
          Cross-Chain Asset <div>Bridges With Efficient</div> Proof Generation
        </div>
      </div>
      <div class="w_content_item">
        <img class="wow animate__animated animate__fadeInUp" src="@/assets/images/logo.jpg" alt="">
        <div class="wow animate__animated animate__fadeInUp" @click="openNewTab('https://twitter.com/thezkcross')">X</div>
        <div class="wow animate__animated animate__fadeInUp" @click="openNewTab('https://t.me/ZKCross')">Telegram</div>
        <div class="wow animate__animated animate__fadeInUp" @click="openNewTab('https://discord.com/invite/aJNjfRvgam')">Discord</div>

        <div class="footer_box">
          <div class="wow animate__animated animate__fadeInUp">About</div>
          <div class="wow animate__animated animate__fadeInUp">Products</div>
          <div class="wow animate__animated animate__fadeInUp">Network</div>
          <div class="wow animate__animated animate__fadeInUp">Resources</div>
          <div class="wow animate__animated animate__fadeInUp">Use Cases</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.extremity_box {
  margin-top: 42px;
  .title {
    font-weight: 600;
    font-size: 30px;
    color: #000000;
    padding-left: 5.33%;
  }
  .content {
    margin-top: 23px;
    padding: 5.87% 8%;
    background: #F7F7F7;
    border-radius: 33px;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom right, #010C22, #0B354D);
    .w_content_item {
      margin-top: 40px;
      background-color: #fff;
      border-radius: 23px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 19.04% 0px;
      font-weight: 600;
      font-size: 20px;
      color: #191919;
      line-height: 23px;
      img {
        width: 35px;
      }
      div {
        margin-top: 40px;
      }
      .footer_box {
        margin-top: 66px;
        display: flex;
        align-items: center;
        flex-direction: column;
        div {
          font-weight: 400;
          font-size: 20px;
          color: #000000;
          line-height: 24px;
          margin-top: 50px;
        }
      }
    }
    .top_item {
      .one {
        background-image: url('@/assets/images/user_1.png');
        margin-top: 35px;
      }
      .two {
        background-image: url('@/assets/images/user_2.png');
      }
      .three {
        background-image: url('@/assets/images/user_3.png');
      }
      .fouth {
        background-image: url('@/assets/images/user_4.png');
      }
    }
    .bottom_item {
      .one {
        background-image: url('@/assets/images/user_5.png');
        margin-top: 35px;
      }
      .two {
        background-image: url('@/assets/images/user_6.png');
      }
      .three {
        background-image: url('@/assets/images/user_7.png');
      }
      .fouth {
        background-image: url('@/assets/images/user_8.png');
      }
    }
    .content_item {
      background: linear-gradient( 180deg, rgba(255,255,255,0.47) 0%, rgba(129,141,153,0) 100%);
      border-radius: 23px;
      padding: 11.11% 6.35%;
      box-sizing: border-box;
      .sub_title {
        font-weight: 600;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 36px;
      }
      .sub_details {
        font-weight: 300;
        font-size: 15px;
        color: #FFFFFF;
        line-height: 23px;
        margin-top: 11px;
      }
      .item {
        background-repeat: no-repeat; /* 确保图片不重复 */
        background-size: cover; /* 背景图片覆盖元素 */
        background-position: center center; /* 背景图片居中 */
        padding: 9.45% 6.55%;
        font-weight: 500;
        font-size: 17px;
        color: #FFFFFF;
        line-height: 22px;
        margin-top: 18px;
        border-radius: 14px;
      }
    }
  }
}
</style>
